<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/考试/jquery.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
</head>
<style>
    body {
        text-align: center;
    }

    div {
        /* width: 1300px; */
        margin: auto;
    }

    .table {
        text-align: center;
        /* width: 1200px; */
    }

    tr,
    th,
    td {
        text-align: center;
    }

    input {
        margin: 20px 0px;
    }

    .select {
        width: 150px;
        float: left;
    }
</style>

<body>
    <h1>学生成绩管理</h1>
    <!--添加学生按钮 -->
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" id="student">
        添加学生
    </button>
    <!-- 填写要添加的值 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">添加学生 成绩</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="exampleInputPassword1">姓名</label>
                        <input type="text" class="form-control" id="kaoshi-name" placeholder="姓名" value="张三">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">第一周</label>
                        <input type="text" class="form-control" id="kaoshi-yi" placeholder="第一周" value="50">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">第二周</label>
                        <input type="number" class="form-control" id="kaoshi-er1" placeholder="第二周笔试" value="60">
                        <input type="number" class="form-control" id="kaoshi-er2" placeholder="第二周机试" value="50">
                        <!-- <input type="number" class="form-control" id="kaoshi-er3" placeholder="第二周平均分" value="55"> -->
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">第三周</label>
                        <input type="number" class="form-control" id="kaoshi-san" placeholder="第三周" value="70">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">第四周</label>
                        <input type="number" class="form-control" id="kaoshi-si1" placeholder="第四周笔试" value="75">
                        <input type="number" class="form-control" id="kaoshi-si2" placeholder="第四周机试" value="55">
                        <!-- <input type="number" class="form-control" id="kaoshi-si3" placeholder="第四周平均分" value="65"> -->
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="saveGoods">发布</button>
                </div>
            </div>
        </div>
    </div>

    <div>
        <!-- 下拉框 -->
        <select name="" id="year" class="form-control select">
            <option value="">年份</option>
        </select>
        <select name="" id="grade" class="form-control select">
            <option value="">年级</option>
        </select>
        <!-- 表格 -->
        <table class="table table-striped table-bordered table-hover table-condensed">
            <thead>
                <tr>
                    <th rowspan="2">姓名</th>
                    <th>第一周</th>
                    <th colspan="3">第二周</th>
                    <th>第三周</th>
                    <th colspan="3">第四周</th>
                    <th rowspan="">月平均分数</th>
                    <th rowspan="">末位次数</th>
                    <th rowspan="">操作</th>
                </tr>
                <tr>
                    <!-- <th></th> -->
                    <th>机试分数</th>

                    <th>笔试分数</th>
                    <th>机试分数</th>
                    <th>平均分数</th>

                    <th>机试分数</th>

                    <th>笔试分数</th>
                    <th>机试分数</th>
                    <th>平均分数</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</body>
<script>
    var grades = []
    $(function () {
        showGoodsList()
        $('tbody').dblclick(edit)
    })
    // 提交的值
    $('#saveGoods').click(function () {
        var goodsname = $('#kaoshi-name').val()
        var goodsyi = $('#kaoshi-yi').val()
        var goodserbi = $('#kaoshi-er1').val()
        var goodserji = $('#kaoshi-er2').val()
        var goodserzong = (Number(goodserbi) + Number(goodserji)) / 2
        // $('#kaoshi-er3').val()
        var goodssan = $('#kaoshi-san').val()
        var goodssibi = $('#kaoshi-si1').val()
        var goodssiji = $('#kaoshi-si2').val()
        var goodssizong = (Number(goodssibi) + Number(goodssiji)) / 2
        var yuepingjinfen = Math.round((Number(goodsyi) + Number(goodserbi) + Number(goodserji) + Number(goodssan) + Number(goodssibi) + Number(goodssiji)) / 8)
        // $('#kaoshi-si3').val()
        var goodsList = {
            goodsname: goodsname,
            goodsyi: goodsyi,
            goodserbi: goodserbi,
            goodserji: goodserji,
            goodserzong: goodserzong,
            goodssan: goodssan,
            goodssibi, goodssibi,
            goodssiji, goodssiji,
            goodssizong: goodssizong,
            yuepingjinfen: yuepingjinfen
        }
        if (yuepingjinfen >= 60) {
            $('tbody td').css('background', 'red')
        }
        grades.push(goodsList)
        saveData('grades', goodsList)
        showGoodsList()
    })
    // 页面渲染
    function showGoodsList() {
        grades = localStorage.getItem('grades') ? JSON.parse(localStorage.getItem('grades')) : []
        var str = ``
        for (let i in grades) {
            str += `<tr>
                            <td data-index="${i}" data-keys="name">${grades[i].goodsname}</td>
                            <td data-index="${i}" data-keys="yi">${grades[i].goodsyi}</td>
                            <td data-index="${i}" data-keys="er1">${grades[i].goodserbi}</td>
                            <td data-index="${i}" data-keys="er2">${grades[i].goodserji}</td>
                            <td>${grades[i].goodserzong}</td>
                            <td data-index="${i}" data-keys="san">${grades[i].goodssan}</td>
                            <td data-index="${i}" data-keys="si1">${grades[i].goodssibi}</td>
                            <td data-index="${i}" data-keys="si2">${grades[i].goodssiji}</td>
                            <td>${grades[i].goodssizong}</td>
                            <td>${grades[i].yuepingjinfen}</td>
                            <td></td>
                            <td><a href="#" onclick="delData(${i})" data-id="${grades[i].id}">删除</a></td>
                        </tr>`
        }
        $('tbody').html(str)
    }
    // 删除
    function delData(index) {
        var x = grades.findIndex(function (item, i) {
            if (item.id == grades[index].id) {
                return true
            }
        })
        // grades.splice(x, 1)
        grades.splice(index, 1)
        // localStorage.setItem('grades', JSON.stringify(grades))
        saveData('grades',grades)
        showGoodsList()
        saveData()

    }
    // 编辑
    function edit(){
        if (event.target.nodeName = 'TD') {
            if ($(event.target).attr('data-index') > -1) {
                let index = $(event.target).attr('data-index')
                let keys = $(event.target).attr('data-keys')
                let inpHtml = `<input type="text" keys="${keys}" onblur="editObj(this,${index})" value="${$(event.target).html()}">`
                $(event.target).html(inpHtml)
            }
        }
    }
    function editObj (obj,index) {
        let val = $(obj).val()
        let keys = $(obj).attr('keys')
        if (keys == 'name') {
            grades[index].goodsname = val
        } else if (keys == 'yi') {
            grades[index].goodsyi = val
        } else if (keys == 'er1') {
            grades[index].goodserbi = val
        } else if (keys == 'er2') {
            grades[index].goodserji = val
        } else if (keys == 'san') {
            grades[index].goodssan = val
        }  else if (keys == 'si1') {
            grades[index].goodssibi = val
        }  else if (keys == 'si2') {
            grades[index].goodssiji = val
        } 

        saveData('grades',grades)
        // localStorage.setItem('grades',JSON.stringify(grades))
        showGoodsList()
    }

    // 本地存储
    function saveData() {
        localStorage.setItem('grades', JSON.stringify(grades))
    }
</script>

</html>